<template>
  <div class="experi_contaner">
    <div class="chart" id="chart_left2"></div>
  </div>
</template>

<script>
export default {
    name: 'expreryComponent',
    data() {
        return {

        }
    },
    mounted() {
        this.getEchart()
    },
    methods: {
        getEchart() {
            const chartDom = document.getElementById('chart_left2');
            const myChart = this.$echarts.init(chartDom);
            let option;

            option = {
                // legend: {},
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    top: '3%',
                    left: '1%',
                    right: '1%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                    type: 'category',
                    axisLabel:{
                        interval: 0,
                        textStyle: {
                            color: '#b3ccf8',
                            fontSize: 11
                        },
                    },
                    data: ['0~30天', '30~60天', '60~90天', '90~180天', '180~365天', '365天以上']
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel:{
                            interval: 0,
                            textStyle: {
                                color: '#b3ccf8',
                                fontSize: 11
                            },
                        },
                    }
                ],
                emphasis: {
                        label: {
                            show: true
                        },
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                },
                series: [
                    {
                        name: '总计',
                        type: 'line',
                        emphasis: {
                            focus: 'series'
                        },
                        data: [207, 211, 140, 277, 171, 84]
                    },
                    {
                        name: '实验成品仓',
                        type: 'bar',
                        stack: 'Ad',
                        emphasis: {
                            focus: 'series'
                        },
                        data: [151, 125, 111, 245, 46, 11]
                    },
                    {
                        name: '实验过期成品仓',
                        type: 'bar',
                        stack: 'Ad',
                        emphasis: {
                            focus: 'series'
                        },
                        data: [0, 0, 0, 11, 86, 30]
                    },
                    {
                        name: 'Array管控仓',
                        type: 'bar',
                        stack: 'Ad',
                        emphasis: {
                            focus: 'series'
                        },
                        data: [37, 56, 20, 7, 0, 0]
                    },
                    {
                        name: '工程仑',
                        type: 'bar',
                        stack: 'Ad',

                        data: [13, 12, 3, 12, 39, 39],
                        emphasis: {
                            focus: 'series'
                        }
                    },
                    {
                        name: '供应链仓',
                        type: 'bar',
                        stack: 'Ad',
                        emphasis: {
                            focus: 'series'
                        },
                        data: [4, 7, 2, 1, 0, 0]
                    },
                    {
                        name: '扣押仓',
                        type: 'bar',
                        stack: 'Ad',
                        emphasis: {
                            focus: 'series'
                        },
                        data: [2, 11, 4, 0,0, 7]
                    },
                   
                ]
            };

            option && myChart.setOption(option);
            window.addEventListener('resize', () => {
                 myChart.resize()
            })

        }
    }
}
</script>

<style lang="scss" scoped>
.experi_contaner {
  .chart {
    height: 4rem;
    width: 100%;
  }
}
</style>